<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>绑定QQ</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div style=" margin: 8px ;margin-right: 45px;text-align: center">
    <h1 style="text-align: center;font-size: 36px">获取绑定码</h1>
    <div style="padding: 16px;">
        <form class="layui-form" action="">
            <!-- <div class="layui-form-item">
                <label class="layui-form-label">IP地址</label>
                <div class="layui-input-block">
                    <input type="text" name="ip" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div> -->
            <!--
            <div class="layui-form-item">
                <label class="layui-form-label">区域信息</label>
                <div class="layui-input-inline">
                    <select name="info1">
                        <option value="">省</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="info2">
                        <option value="">市</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="info3">
                        <option value="">区</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="isp">
                        <option value="">运营商</option>
                    </select>
                </div>
            </div>
            -->
              <p style="font-size: 16px;text-align: left">
                生成绑定码后，私聊微服机器人发送，绑定码仅5分钟内有效，若绑定失效，重新绑定，使用别人的绑定码后果自负
                <br>
                <br>
            </p>
            <br>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">生成绑定码</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">绑定码</label>
                <div class="layui-input-block">
                    <input type="text" name="code"  disabled autocomplete="off"
                           class="layui-input">
                </div>
            </div>

         <br>
            <!--
            <div class="layui-form">
                <label class="layui-form-label">快捷登录</label>
                <input type="checkbox" name="AAA" title="同运营商">
                <input type="checkbox" name="BBB" title="同区">
                <input type="checkbox" name="CCC" title="同市">
                <input type="checkbox" name="DDD" title="同省">
            </div>
-->
        </form>
       <!--   <h2> 当前区域下的玩家列表</h2>
      <table class="layui-hide" id="p_list" lay-filter="list"></table> -->
    </div>

</div>
<script src="./layui/layui.js"></script>
<script>
    layui.use(function () {


        var $ = layui.$;
        var layer = layui.layer;
        var table = layui.table;
        var util = layui.util;
        var form = layui.form;
        //从后台读取IP地址填充到表单中
        // $.ajax({
        //     url: './get_ip',
        //     type: 'GET',
        //     success: function (data) {
        //         $('input[name="ip"]').val(data.ip);
        //     }
        // });
        // table.render({
        //     elem: '#p_list'
        //     , url: './player_list' //数据接口
        //     , page: true //开启分页
        //     , cols: [[ //表头
        //         {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
        //         , {field: 'name', title: '玩家名称', width: 150}
        //         , {field: 'info', title: '区域信息', width: 300}
        //         , {
        //             field: 'last_time', title: '最后登录时间', width: 200, sort: true, templet: function (d) {
        //                 return util.toDateString(d.last_time * 1000, 'yyyy-MM-dd HH:mm:ss');
        //             }
        //         }
        //     ]]
        // });
        //监听提交
        layui.form.on('submit(formDemo)', function (data) {
            //发异步，把数据提交给php
            $.ajax({
                url: '.././bind/get_bind_code',
                type: 'POST',
                data: {},
                success:  function (res) {
                    if (res.code === 0) {
                        $('input[name="code"]').val("#绑定 " + res.data.bind_code);
                        layer.msg('绑定码生成成功，已复制到剪切板', {icon: 1});
                        //自动复制到剪切板
                        navigator.clipboard.writeText("#绑定 " + res.data.bind_code);
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                },
                error: function () {
                    layer.msg('服务器错误', {icon: 2});
                }
            });
            return false;
        });
    })
</script>
</body>
</html>